<template>
  <div class="container">
    <div class="header_box">
      <span @click="goBack">
        <van-icon name="arrow-left" />返回
      </span>
      前端最牛逼.vant
    </div>
    <!-- 内容区 -->
    <div class="news_detial">
      <h3 v-if="currentNews.length!==0">{{currentNews[0].title}}</h3>
      <div class="info">
        <span v-if="currentNews.length!==0">发表时间：{{currentNews[0].add_time.substr(0,10)}}</span>
        <span v-if="currentNews.length!==0">点击次数: {{currentNews[0].click}}</span>
      </div>
      <div class="content" v-if="currentNews.length!==0" v-html="currentNews[0].content"></div>
    </div>
    <!-- 评论区 -->
    <div class="comments">
      <h4>发表评论</h4>
      <hr />
      <div class="inputComments">
        <van-cell-group>
          <van-field v-model="message" type="textarea" placeholder="请输入留言" rows="1" autosize></van-field>
          <van-button type="info" @click="addComment">发表评论</van-button>
          <div class="commentContent" v-for="(item, index) in commentsList" :key="index">
            <div class="title">
              <span>第{{index+1}}楼</span>&nbsp;&nbsp;
              <span>用户: {{item.user_name}}</span>&nbsp;&nbsp;
              <span>发表时间:&nbsp;&nbsp;{{item.add_time.substr(0,10)}}</span>
            </div>
            <div class="commentDetial">{{item.content}}</div>
          </div>
          <van-button type="default" class="getMore" @click="getMore">加载更多</van-button>
        </van-cell-group>
      </div>
    </div>
    <!-- tabbar 底边栏 -->
    <!-- <van-tabbar v-model="active">
      <van-tabbar-item icon="home-o">标签</van-tabbar-item>
      <van-tabbar-item icon="search" dot>标签</van-tabbar-item>
      <van-tabbar-item icon="friends-o" info="5">标签</van-tabbar-item>
      <van-tabbar-item icon="setting-o" info="20">标签</van-tabbar-item>
    </van-tabbar>-->
  </div>
</template>

<script>
export default {
  created() {
    this.showCurrentNewsDetial();
    this.getComments();
  },
  data() {
    return {
      // 当前的新闻详细信息
      currentNews: [],
      // 评论信息
      commentsList: [],
      // 评论楼数
      count: 1,
      // 查询评论的页数
      pageindex: 1,
      // 评论内容
      message: "",
      active: 1
    };
  },
  methods: {
    goBack() {
      this.$router.go(-1);
      window.sessionStorage.clear();
    },
    // 展示当前点击的新闻的详细信息
    async showCurrentNewsDetial() {
      const id = this.$route.params.id;
      // console.log(id, 2222);  根据id向后台发送请求 获取当前新闻的详细信息
      const { data: res } = await this.$http.get(`/api/getnew/${id}`);
      // console.log(res);
      if (res.status !== 0) {
        return this.$notify({
          type: "warning",
          message: "获取新闻详细数据失败"
        });
      }
      this.currentNews = res.message;
    },
    // 获取当前新闻的评论信息
    async getComments() {
      const id = this.$route.params.id;
      console.log(id, 666666);
      const { data: res } = await this.$http.get(`/api/getcomments/${id}`, {
        params: { pageindex: this.pageindex }
      });
      // console.log(res,2222222);
      if (res.status !== 0) {
        return this.$notify({ type: "warning", message: "获取评论数据失败" });
      }
      // this.commentsList = res.message;
      // 将首次加载页面的评论数据存储在sessionStorage   sessionStorage里面存储的是字符串 要将字符串转化为对象 JSON.stringify()将对象转化为json格式字符串  JSON.parse()将json格式的字符串转化为json对象
      window.sessionStorage.setItem("comments", JSON.stringify(res.message));
      this.commentsList = JSON.parse(window.sessionStorage.getItem("comments"));
    },
    // 加载更多评论  首次加载评论数据的时候去到 sessionStorage 里面取  渲染 点击加载更多 再次向服务器发送请求 pageindex+1 将数据追加到sessionStorage里面 再取出来渲染
    async getMore() {
      const id = this.$route.params.id;
      this.pageindex += 1;
      const { data: res } = await this.$http.get(`/api/getcomments/${id}`, {
        params: { pageindex: this.pageindex }
      });
      // console.log(res,2222222);
      if (res.status !== 0) {
        return this.$notify({ type: "warning", message: "获取评论数据失败" });
      }
      // 点击获取更多拿到的数据
      const newCommentList = res.message;
      // 上一次sessionStorage里面存储的数据
      const oldCommentList = JSON.parse(
        window.sessionStorage.getItem("comments")
      );
      // 点击后最新的数据
      const getMoreData = oldCommentList.concat(newCommentList);
      window.sessionStorage.setItem("comments", JSON.stringify(getMoreData));
      this.commentsList = JSON.parse(window.sessionStorage.getItem("comments"));
    },
    // 添加评论
    async addComment(e) {
      // 拿到当前新闻的id
      const id = this.$route.params.id;
      // 拿到输入框内的值
      // console.log(this.message, 333333);
      // 判断输入框内的值是否为空
      const inputVal = this.message;
      if (inputVal.trim().length <= 0) {
        return this.$toast("留言不能为空");
      }
      const { data: res } = await this.$http.post(`/api/postcomment/${id}`, {
        content: inputVal
      });
      // console.log(res,6666666);
      if (res.status !== 0) {
        return this.$notify({ type: "warning", message: "添加评论失败" });
      }
      this.$notify({ type: "success", message: "添加评论成功" });
      this.message = "";
      this.getComments();
    }
  }
};
</script>

<style lang="less" scoped>
.container {
  padding-bottom: 50px;
}
.header_box {
  width: 100%;
  height: 40px;
  background: #1989fa;
  text-align: center;
  line-height: 40px;
  color: #fff;
  font-size: 14px;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1;
}
.header_box {
  span {
    position: fixed;
    top: 0;
    display: flex;
    align-items: center;
    left: 15px;
  }
}
.news_detial {
  margin-top: 40px;
  margin-bottom: 50px;
  padding: 0 10px;
}
.van-tabbar {
  width: 100%;
  height: 50px;
  position: fixed;
  bottom: 0;
  left: 0;
}
.comments {
  .van-field {
    border: 1px solid #ccc;
    display: flex;
    box-sizing: border-box;
    width: 100%;
    height: 90px;
    padding: 20px 16px;
    overflow: hidden;
    color: #323233;
    font-size: 14px;
    line-height: 24px;
    background-color: #fff;
  }
  .van-button {
    margin: 5px 0;
    font-size: 14px;
    width: 100%;
  }
  .van-cell-group {
    padding: 10px 16px;
    .title {
      height: 30px;
      background-color: #ccc;
      font-size: 12px;
      line-height: 30px;
    }
    .commentDetial {
      text-indent: 2em;
      font-size: 12px;
      line-height: 30px;
    }
    .getMore {
      border: 1px solid #f44;
      color: #f44;
    }
  }
}
h3 {
  color: #1989fa;
  font-size: 14px;
  text-align: center;
  line-height: 30px;
  margin: 0;
  padding: 5px 0;
}
.info {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: #1989fa;
  border-bottom: 1px solid #ccc;
  padding: 7px 0;
}
</style>